<template>
	<view class="item grace-flex grace-flex-vcenter" hover-class="item-hover" @click="onClick">
		<text v-if="icon" class="iconfont icon" :class="'icon-'+icon" :style="'color: '+color+';'"></text>
		<text class="grace-flex1 grace-h4" style="margin-left: 10rpx;">{{title}}</text>
		<slot></slot>
		<text class="iconfont icon-jinru grace-gray"></text>
	</view>
</template>

<script>
	var graceJS = require('@/Grace.JS/grace.js');
	export default {
		props:{
			title:String,
			icon:String,
			color:String,
			url:String
		},
		data() {
			return {
			
			};
		},
		methods:{
			onClick(){
				if(this.url){
					graceJS.navigate(this.url);
				}else{
					this.$emit('click')
				}
			}
		}
	}
</script>

<style lang="stylus">
.item:first-child
	border-top 1rpx solid #F4F4F4
.item
	border-bottom 1rpx solid #F4F4F4
	padding 30rpx 20rpx
	.icon
		font-size 40rpx !important
.item-hover
	background #F4F4F4
</style>
